<template>
  <view class="container">
    <!--  带搜索的标题栏  -->
    <view class="back-layout hor-layout">
      <view class="back-view" @click="navBack">
        <i class="iconfont back-icon">&#xe8de;</i>
      </view>
      <u-search margin="8px" placeholder="请输入教师姓名" v-model="search" :action-style="searchStyle"
                @search="getLiveList" @custom="getLiveList" @clear="getLiveList"></u-search>
    </view>
    <u-tabs-swiper class="swiper-tabs" ref="uTabs" :list="tabList" :current="current" :is-scroll="false"
                   active-color="#42B4AB" @change="tabsChange"></u-tabs-swiper>
    <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
      <swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
        <scroll-view class="swiper-item-list" scroll-y @scrolltolower="onScrollBottom">
          <view v-if="liveList.length<=0" class="list-no-data">
            暂无数据
          </view>
          <block v-else>
            <view v-for="(item,index) in liveList" :key="index" class="live-item ver-layout"
                  @click="toLiveInfo(item)">
              <image class="live-icon" :src="item.course_image"/>
              <view class="live-content hor-layout-side-center">
                <view>{{ item.teacher_name }}</view>
                <view>{{ item.teacher_major }}</view>
              </view>
            </view>
            <u-loadmore v-if="loadingObj.status" margin-top="15" :status="loadingObj.status"/>
          </block>
          <view style="height: 20px"></view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import {addTeacher, teacherInfo, clockIn, recordCourse, courseLiveInfo} from "@/router.js"
import {CourseLiveApi} from "@/api/courseLive.js"

let engine = new CourseLiveApi()
export default {
  name: "teacher",
  data() {
    return {
      flag: '',
      searchStyle: {
        color: 'white',
        width: '60px',
        height: '28px',
        lineHeight: '28px',
        borderRadius: '14px',
        background: '#ff9900',
      },
      tabList: [{name: "全部"}, {name: "钢琴"},],
      liveList: [{course_image:'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/90299d13b40a42d28201895d3ce3d33f~tplv-k3u1fbpfcp-zoom-mark-crop-v2:240:240:0:0.awebp?',teacher_name:'ces',teacher_major:'ces'}],
      current: 0,
      swiperCurrent: 0,
      search: '',
      loadingObj: {
        status: '',
        current: 1,
        total: ''
      },
    }
  },
  computed: {},
  onLoad(options) {
    this.flag = options.text
    this.getMajorList()
  },
  methods: {
    getMajorList() {
      engine.getMajorList().then(res => {
        let tabList = res.data
        tabList.unshift({id: '', name: '全部'})
        this.tabList = tabList
        this.refreshData()
      })
    },
    getLiveList() {
      let major = this.tabList.find((item, index) => {
        return index === this.swiperCurrent
      }).id || ''
      let search = this.search,
          page = this.loadingObj.current
      engine.getLiveList({page, search, major}).then(res => {
        this.liveList = this.liveList.concat(res.data)
        this.loadFinish(res.total)
      })
    },
    refreshData() {
      this.loadingObj.current = 1
      this.loadingObj.status = ''
      this.liveList = []
      this.getLiveList()
    },
    loadMore() {
      if (this.loadingObj.current === this.loadingObj.total) {
        this.loadingObj.status = 'nomore'
      } else {
        this.loadingObj.status = 'loading'
        this.loadingObj.current = this.loadingObj.current + 1
        this.getLiveList()
      }
    },
    loadFinish(total) {
      this.loadingObj.total = Math.ceil(total / 10)
      this.loadingObj.status = ''
      if (this.loadingObj.current >= this.loadingObj.total
          && this.liveList.length > 0) {
        this.loadingObj.status = 'nomore'
      }
    },
    navBack() {
      this.$u.route({type: 'back'})
    },
    tabsChange(index) {
      this.swiperCurrent = index;
      this.refreshData()
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
      this.refreshData()
    },
    onScrollBottom(e) {
      console.log("onScrollBottom", e)
      this.loadMore()
    },
    toLiveInfo(item) {
      this.$u.route({url: courseLiveInfo, params: item})
    },
    toAddTeacherPage() {
      this.$u.route({url: addTeacher})
    }
  }
}
</script>

<style>
page {
  background: #F2F2F2;
}

.back-layout {
  position: fixed;
  width: 100%;
  padding-top: var(--status-bar-height);
  height: calc(var(--status-bar-height) + 44px);
  line-height: 44px;
  font-size: 16px;
  background: #42B4AC;
}

.back-view {
  padding-left: 9px;
  padding-right: 9px;
}

.back-icon {
  color: white;
  font-size: 22px;
}

.container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
}

.swiper-tabs {
  margin-top: calc(44px + var(--status-bar-height));
  border-bottom: 1px solid #F2F2F2;
}

.swiper-box {
  flex: 1;
}

.swiper-item {
  height: 100%;
}

.swiper-item-list {
  height: 100%;
  width: 100%;
}

.list-no-data {
  width: 100%;
  height: 300px;
  text-align: center;
  line-height: 300px;
}

.live-item {
  margin: auto;
  margin-top: 10px;
  background: #FFFFFF;
  width: calc(100% - 24px);
  border-radius: 10px;
}

.live-icon {
  width: 100%;
  height: 100px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.live-content {
  padding: 10px;
}
</style>
